import React, { useContext } from 'react'
import styles from './Counter.module.css'
import { FaPlus, FaMinus } from "react-icons/fa";
import CartContext from '@/store/cartContext';

function Counter({ food }) {
    const ctx = useContext(CartContext)
    const onAddHandler = () => {
        // ctx.addFood(food)
        ctx.cartDispatch({type:'Add',food:food})
    }
    const onSubHandler = () => {

        // ctx.subFood(food)
        ctx.cartDispatch({type:'Remove',food:food})
    }
    return (
        <div className={styles.Counter}>
            {
                (food.amount && food.amount !== 0) ? (
                    <>
                        <button className={styles.Sub} onClick={onSubHandler}><FaMinus /></button>
                        <span className={styles.Count}>{food.amount}</span>
                    </>) : null
            }


            <button className={styles.Add} onClick={onAddHandler}><FaPlus /></button>
        </div>
    )
}

export default Counter